<template>
  <div class="wrapper">
    <hips-icon
      class="icon"
      name="add-participants"
      color="#e96767"
      @click.native="showToast"
    />
  </div>
</template>

<script>
import { Icon } from '@hips/vue-ui';

export default {
  name: 'HeaderIcon',
  components: {
    [Icon.name]: Icon,
  },
  props: {
    duration: { type: Number, default: 3000 },
  },
  methods: {
    showToast() {
      this.$hips.toast({
        duration: this.duration,
        message: '这是一个页面头部自定义组件提示',
      });
    },
  },
};
</script>

<style scoped lang="less">
.wrapper {
  display: flex;
  .icon {
    font-size: 24px;
  }
}
</style>
